<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生成5位不同的数字</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        input{
            width: 200px;
        }
    </style>
</head>
<body >
<script type="text/javascript">
    //查询数吗据
    function f() {
        var number1 =document.getElementById("number1").value;
        var number2 =document.getElementById("number2").value;
        var number3 =document.getElementById("number3").value;
        var number4 =document.getElementById("number4").value;
        var number5 =document.getElementById("number5").value;



        //相连的数
        var selectvalue=$("input[name='radio']:checked").val();   //  selectvalue为radio中选中的值

        // 1,2,3,4四个数可以组成多少百个无重复数字的三位数
        //考察度多重循环
        var count = 0;//计数器
        var num = 0;//计数器
        var result = new Map();
        for (var i = 1; i <= 11; i++) {//遍历个位知的道所有数
            for (var j = i; j <= 11; j++) {//遍历十位的所有数
                for (var k = j; k <= 11; k++) {//遍历百位的所有数
                    for (var l = k; l <= 11; l++) {//遍历百位的所有数
                        for (var m = l; m <= 11; m++) {//遍历百位的所有数
                            num++;
                            if (k !== j && k !== i &&k !== l &&k !== m
                                && j !== i&& j !== l&& j !== m
                                && i !== l&& i !== m
                                && l !== m) {//如果个位，十位，百位上的数都不相等

//                       System.out.println(m  +"-"+l  +"-"+k +"-"+ j  +"-"+ i);//打印组成后的五位数
                                var list=new Array(5);
                                list[0] = i;
                                list[1] = j;
                                list[2] = k;
                                list[3] = l;
                                list[4] = m;


                                if (number1 !=='') {
                                    list[0]=number1
                                }
                                if (number2 !=='') {
                                    list[1]=number2
                                }
                                if (number3 !=='') {
                                    list[2]=number3
                                }
                                if (number4 !=='') {
                                    list[3]=number4
                                }
                                if (number5 !=='') {
                                    list[4]=number5
                                }

                                if (list[0] === list[1] || list[0] === list[2] ||list[0] === list[3] ||list[0] === list[4]||
                                    list[1] === list[2] || list[1] === list[3] ||list[1] === list[4]||
                                    list[2] === list[3] || list[2] === list[4] ||
                                    list[3] === list[4]
                                ) {//如果个位，十位，百位上的数都不相等
                                    continue;
                                }
                                    list.sort(sortNumber);
                                    console.log(list.toString())
                                    result.set(list.toString(), list.toString());

                                }
                        }
                    }
                }
            }
        }

        var  str='<table class="table table-bordered" border="1">' +
            '<th>序号</th><th>值</th>'
        for(let item of result.values()){

            let parse = JSON.parse('['+item+']');
            console.log(parse[0]+":"+(parse[1]-1))
            console.log(item)

            if (parse[0] !== parse[1] && parse[0] !== parse[2] && parse[0] !== parse[3] && parse[0] !== parse[4]
                && parse[1] !== parse[2] && parse[1] !== parse[3] && parse[1] !== parse[4]
                && parse[2] !== parse[3] && parse[2] !== parse[4]
                && parse[3] !== parse[4]) {//如果个位，十位，百位上的数都不相等

            } else {
                continue
            }

            if (selectvalue === "1" && parse[0] !== (parse[1]-1)) {
                continue;
            }else if (selectvalue === "2" && parse[1] !== (parse[2]-1)) {
                continue;
            }
            else if (selectvalue === "3" && parse[2] !== (parse[3]-1)) {
                continue;
            }
            else if (selectvalue === "4" && parse[3] !== (parse[4]-1)) {
                continue;
            }

            count++;//记录组成内的容个数
            str+="<tr><td><span id=\"item"+count+"\">"+count+"</span></td>" +
                "<td>"+item+"</td>" +
                "</tr>"
                // <th>操作</th><td><span class='btn-success' onclick='copyText(\"item"+count+"\")'>复制</span></td>
        }
        str+='</table>'
        document.getElementById("result").innerHTML=str
        document.getElementById("total").innerHTML="总共有"+count+"种结果"
        console.log("总共有<span class='text-success'><b>"+count+"</b></span>种结果,循环次数:"+num)
    }

    //清空值
    function c() {
        document.getElementById("number1").value='';
        document.getElementById("number2").value='';
        document.getElementById("number3").value='';
        document.getElementById("number4").value='';
        document.getElementById("number5").value='';
        $("input[type='radio']").removeAttr('checked');
    }

    function sortNumber(a,b)
    {
        return a - b
    }

</script>

<div style="width: 80%;margin: 0px auto">
    <div><h3>11位产生5位不同组合结果</h3></div>
    <div>
        <form role="form">
            <div class="form-group">
                <label >第一位</label>
                <input type="text" class="form-control" width="60px" id="number1"
                       placeholder="请输入第一位数字">
            </div>
            <div class="form-group">
                <label >第二位</label>
                <input type="text" class="form-control" width="60px" id="number2"
                       placeholder="请输入第二位数字">
            </div>
            <div class="form-group">
                <label >第三位</label>
                <input type="text" class="form-control" width="60px" id="number3"
                       placeholder="请输入第三位数字">
            </div>
            <div class="form-group">
                <label >第四位</label>
                <input type="text" class="form-control" width="60px" id="number4"
                       placeholder="请输入第四位数字">
            </div>
            <div class="form-group">
                <label >第五位</label>
                <input type="text" class="form-control" width="60px" id="number5"
                       placeholder="请输入第五位数字">
            </div>
            <div>
                <label >第n位相连数</label>
                <label>
                    <input type="radio" name="radio" id="radio1" value="1" > 1-2位
                </label>
                <label>
                    <input type="radio" name="radio" id="radio2"  value="2"> 2-3位
                </label>
                <label>
                    <input type="radio" name="radio" id="radio3"  value="3"> 3-4位
                </label>
                <label>
                    <input type="radio" name="radio" id="radio4"  value="4"> 4-5位
                </label>
            </div>

            <div onclick="f()"  class="btn btn-default">提交</div>
            <div onclick="c()"  class="btn btn-danger">清空</div>
        </form>
    </div>
    <div id="total" ></div>
    <div id="result" style="text-align: center;"></div>

</div>
</body>
</html>
